<template>
    <div>
        <div class="departNav">
            <h3 class="font16">医院公告</h3>
            <p class="font12">更多公告</p>
        </div>
        <div class="noticeList">
            <div class="noticeItem" v-for="(v, index) in noticeList" :key="index">
                <p class="font14" style="font-size: 16px;font-weight: 700;" @click="routerDetail()">{{ v.title }}
                </p>
                <p class="font12">{{ v.content }}</p>
                <p class="font12">{{ v.hospital }} {{ v.day }} {{ v.num }}人已读</p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ref } from 'vue'

const noticeList = ref([
    { title: '智慧医院便民平台小程序上线啦，手机也能问诊医生啦', content: '智慧医院建设的第二个领域是以患者为对象的智慧服务。2019年，国家卫生健康委发布《医院智慧服务分级评估标准体系(试行)》，将医院“智慧服务”分成5级，主要指医院（特别是三级医院）利用互联网、物联网等信息化手段，为患者提供预约诊疗、候诊提醒、院内导航等服务，范围涵盖诊前、诊中、诊后和基础安全等就诊全流程。', hospital: '四川省保健院', day: '10天前', num: 1 },
    { title: '智慧医院便民平台小程序上线啦，手机也能问诊医生啦', content: '智慧医院建设的第二个领域是以患者为对象的智慧服务。2019年，国家卫生健康委发布《医院智慧服务分级评估标准体系(试行)》，将医院“智慧服务”分成5级，主要指医院（特别是三级医院）利用互联网、物联网等信息化手段，为患者提供预约诊疗、候诊提醒、院内导航等服务，范围涵盖诊前、诊中、诊后和基础安全等就诊全流程。', hospital: '四川省保健院', day: '10天前', num: 1 },
    { title: '智慧医院便民平台小程序上线啦，手机也能问诊医生啦', content: '智慧医院建设的第二个领域是以患者为对象的智慧服务。2019年，国家卫生健康委发布《医院智慧服务分级评估标准体系(试行)》，将医院“智慧服务”分成5级，主要指医院（特别是三级医院）利用互联网、物联网等信息化手段，为患者提供预约诊疗、候诊提醒、院内导航等服务，范围涵盖诊前、诊中、诊后和基础安全等就诊全流程。', hospital: '四川省保健院', day: '10天前', num: 1 },
    { title: '智慧医院便民平台小程序上线啦，手机也能问诊医生啦', content: '智慧医院建设的第二个领域是以患者为对象的智慧服务。2019年，国家卫生健康委发布《医院智慧服务分级评估标准体系(试行)》，将医院“智慧服务”分成5级，主要指医院（特别是三级医院）利用互联网、物联网等信息化手段，为患者提供预约诊疗、候诊提醒、院内导航等服务，范围涵盖诊前、诊中、诊后和基础安全等就诊全流程。', hospital: '四川省保健院', day: '10天前', num: 1 },
])

let router = useRouter()


// 跳转到公告详情
const routerDetail = () => {

    console.log('Attempting to navigate to noticeDetail with id: someId');
    router.push({ name: 'noticeDetail', params: { id: 'someId' } });
}

</script>

<style lang="scss" scoped>
.departNav {
    display: flex;
    justify-content: space-between;
    padding: 16px;
    box-sizing: border-box;
}

.noticeList {
    padding: 0 16px 70px;

    .noticeItem {
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
        margin-top: 14px
    }
}
</style>